import React, { useState, useEffect, useDeferredValue } from "react";

// 当参数发生改变的时候，useDeferredValue会自动产生一个副本
// 可以直接去监听副本的改变

// 当页面没有卡顿的时候，一切都是正常的
// 当页面卡顿的时候，会自动地添加防抖功能

// 性能优化
const App = () => {
  const [value, setValue] = useState("");
  const [list, setList] = useState([]);

  const value2 = useDeferredValue(value);

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  useEffect(() => {
    console.log(11);

    const newArr = [];
    for (let i = 0; i < 10000; i++) {
      newArr.push(value2);
    }
    setList(newArr);
  }, [value2]);

  return (
    <>
      <h2>useDeferredValue</h2>
      <input type="text" value={value} onChange={handleChange} />

      <ul>
        {list.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </>
  );
};

export default App;
